import * as React from "react"
import { Text, View } from "react-native"
import { Flex, List, WingBlank, Progress, Button } from "@ant-design/react-native"
import { Screen, Header } from "../../components"

export interface S {
  history?: any
}
const Item = List.Item
const listArr = [
  ["福利", "当前等级VIP0", "晋级后VIP1"],
  ["晋级礼金", "x", "x"],
  ["生日礼金", "x", "x"],
  ["每月红包", "x", "x"],
  ["佳节礼品", "x", "x"],
  ["专属活动", "x", "x"],
  ["极速退款", "0.35%", "0.40%"]
]
const cardArr = [
  { title: "VIP晋级礼金", middle: "111", bottom: "立即领取" },
  { title: "每月红包", middle: "111", bottom: "立即领取" },
  { title: "生日礼物", middle: "111", bottom: "立即领取" }
]

function renderList(arr: any) {
  return arr.map((item, index) => {
    return (
      <Item
        key={index}
        styles={{ Line: { borderBottomWidth: 0 } }}
        style={index % 2 === 0 ? { backgroundColor: "#2D3043" } : { backgroundColor: "#23263A" }}
      >
        <Flex>
          {item.map((insideItem, index) => {
            return (
              <Flex.Item key={index}>
                <Text style={{ color: "#FFF", textAlign: "center" }}>{insideItem}</Text>
              </Flex.Item>
            )
          })}
        </Flex>
      </Item>
    )
  })
}
function renderCards(arr: any) {
  return arr.map((item, index) => {
    return (
      <View
        key={index}
        style={{
          flex: 1,
          margin: 4,
          backgroundColor: "#2d3043",
          paddingBottom: 10,
          borderRadius: 5
        }}
      >
        <View
          style={{
            backgroundColor: "#2965FC",
            paddingTop: 3,
            paddingBottom: 3,
            borderTopLeftRadius: 5,
            borderTopRightRadius: 5
          }}
        >
          <Text style={{ color: "#FFF", textAlign: "center" }}>{item.title}</Text>
        </View>
        <View
          style={{
            paddingTop: 10,
            paddingBottom: 10
          }}
        >
          <Text style={{ color: "#FA6400", textAlign: "center", fontSize: 16 }}>{item.middle}</Text>
        </View>
        <View>
          <Button
            type="primary"
            style={{
              backgroundColor: "#2965FC",
              color: "#FFFFFF",
              borderRadius: 20
            }}
            size="small"
          >
            {item.bottom}
          </Button>
        </View>
      </View>
    )
  })
}
export default class VipScreen extends React.Component<S, {}> {
  constructor(props) {
    super(props)
    this.state = {
      leaverNum: 80,
      progressNum: 0
    }
  }
  componentDidMount() {
    this.animate()
  }
  animate() {
    const timer = setInterval(() => {
      this.setState(prevState => {
        return { progressNum: prevState.progressNum + 1 }
      })
      if (this.state.progressNum >= this.state.leaverNum) {
        this.setState({ progressNum: this.state.leaverNum })
        clearInterval(timer)
      }
    }, 5)
  }
  render() {
    return (
      <Screen preset="scroll" style={{ backgroundColor: "#000" }}>
        <Header
          style={{ backgroundColor: "#23263A" }}
          onLeftPress={() => {
            this.props.history.goBack()
          }}
          leftIcon="back"
          headerText="VIP中心"
        ></Header>
        <View style={{ backgroundColor: "#23263A", marginTop: 10, padding: 16, color: "#FFF" }}>
          <Text style={{ color: "#FFF", marginBottom: 10 }}>VIP等级</Text>
          <View
            style={{
              backgroundColor: "#2D3043",
              paddingTop: 30,
              paddingBottom: 30,
              paddingLeft: 16,
              paddingRight: 16
            }}
          >
            <View>
              <Progress
                percent={this.state.progressNum}
                style={{ backgroundColor: "#FFF", height: 10, borderRadius: 10, marginBottom: 20 }}
                barStyle={{ backgroundColor: "#2965FC", height: 10, borderRadius: 10 }}
              />
            </View>
            <Text style={{ color: "#D3D3D7", lineHeight: 20 }}>
              晋级到V1: {"\r\n"}还需要存款5.00元且有效投注
              2000元，完成1次提款每日02:00:00计算升级、晋级/保级成功后每天计算降级
            </Text>
          </View>
        </View>
        <View style={{ padding: 20 }}>
          <Text style={{ color: "#FFF" }}>VIP福利</Text>
          <View style={{ marginTop: 10, flexDirection: "row", justifyContent: "space-around" }}>
            {renderCards(cardArr)}
          </View>
          <Text>
            晋级到V1： 还需要存款5.00元且有效投注
            2000元，完成1次提款每日02:00:00计算升级、晋级/保级成功后每天计算降级
          </Text>
        </View>
        <View>
          <WingBlank size="sm">
            <List style={{ borderRadius: 2 }}>{renderList(listArr)}</List>
          </WingBlank>
        </View>
      </Screen>
    )
  }
}
